<template>
	<view :class="['list-item', { 'no-border-bottom': !bottomBorder }]">
		<view class="list-item-left">
			<uni-icons :type="iconType" size="20"></uni-icons>
			<view>{{text}}</view>
		</view>
		<view class="list-item-right">
			<view>{{number}}</view>
			<uni-icons type="right" size="15"></uni-icons>
		</view>
		<button class="button" v-if="hoverButton" open-type="contact">{{buttonText}}</button>
	</view>
</template>

<script setup>
	const props = defineProps({
		iconType: {
			type: String,
			default: "download-filled"
		},
		text: {
			type: String,
			default: "我的下载"
		},
		number: {
			type: String,
			default: ""
		},
		bottomBorder: {
			type: Boolean,
			default: true
		},
		hoverButton: {
			type: Boolean,
			default: false
		},
		buttonText: {
			type: String,
			default: "点击按钮"
		}
	})
</script>

<style lang="scss" scoped>
	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: $row-widget-height;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
		padding: 0 30rpx;
		position: relative;

		&.no-border-bottom {
			border-bottom: none; // 当 bottomBorder 为 false 时，移除下边框
		}

		.list-item-left {
			display: flex;
			color: gray;
			line-height: $row-widget-height;
			gap: 20rpx;

			:deep() {
				.uni-icons {
					color: $brand-theme-color !important;
				}
			}
		}

		.list-item-right {
			display: flex;
			color: gray;
			line-height: $row-widget-height;
			gap: 20rpx;

			:deep() {
				.uni-icons {
					color: $text-font-color-2 !important;
				}
			}
		}

		.button {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>